<template>
	<view class="list-item">
		<view class="img-box">
			<image class="img" :src="data.imgUrl"></image>
		</view>
		<view class="text-box">
			<view class="title-box">{{data.title}}</view>
			<view class="star-box">
				<image class="star" src="http://yao.hayzon.com/static/star.png"></image>
			</view>
			<view class="sub-title-box">
				<view class="left">
					{{data.subTitle}}
				</view>
				<view class="right">
					{{data.distance}}米
				</view>
			</view>
			<view class="tag-box">
				<view class="tag" v-if="data.tag">{{data.tag}}</view>
			</view>
		</view>
	</view>
	
</template>
	
<script>
	export default{
		props:{
			data:{
				imgUrl: '',
				title: '',
				subTitle: '',
				distance: '',
				tag: ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-item{
		width: 100%;
		height: 180rpx;
		background: red;
		margin-bottom: 8rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 0 10rpx;
		.img-box{
			float: left;
			width: 200rpx;
			height: 100%;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.text-box{
			float: left;
			width: 500rpx;
			height: 100%;
			float:right;
			position: relative;
			.title-box{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.star-box{
				height: 30rpx;
				.star{
					width: 180rpx;
					height: 30rpx;
					display: block;
				}
			}
			.sub-title-box{
				width: 100%;
				font-size: 18rpx;
				color: #999;
				height: 40rpx;
				line-height: 1.3;
				overflow: hidden;
				.left{
					float: left;
					width: 350rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.right{
					float: right;
				}
			}
			.tag-box{
				.tag{
					background: #ff6600;
					color: #fff;
					display: inline-block;
					padding: 2px 5px;
					font-size: 12rpx;
					line-height: 1.2;
				}
			}
		}
	}
</style>
